import React, { useState } from 'react';
import styles from './App.css';
import {Row, Col, Table, Tag, Button, Form, Select, Space, PageHeader, Alert, Spin} from 'antd';
import { useRequest, request } from 'umi';
import Column from 'antd/lib/table/Column';

const { Option } = Select;

//需要重写的名字渲染逻辑
//再来个map就能改颜色了（=·w·=）
function renderNames(names, filterNameList){
  if(!names){
    return null;
  }

  return names.map((name)=>{
    let element = <Tag color = 'blue' style={{margin:'5px'}} key = {name}>{name}</Tag>;
    if(filterNameList.length==0){
      return element;
    }

    if(filterNameList.indexOf(name)!==-1){
      return element;
    }else{
      return null;
    }
  });
}

//不知道什么鬼数据结构的转换
function convertRawDataToTableData(lessonList){
  let TableData = [];
  for(let lessonNum = 0, len = lessonList[0].length;lessonNum < len;lessonNum ++){
    let element = {
      lesson: lessonNum+1,
      Monday: lessonList[0][lessonNum],
      Tuesday: lessonList[1][lessonNum],
      Wednesday: lessonList[2][lessonNum],
      Thusday: lessonList[3][lessonNum],
      Friday: lessonList[4][lessonNum],
      Saturday: lessonList[5][lessonNum],
      Sunday: lessonList[6][lessonNum],
    };
    TableData.push(element);
  }
  return TableData;
}

//availPersonList :名字列表，无颜色
//availWeekList :周数列表，整形
//onFinishFunc :将表结果存至上一层结构的函数
function WeekAndPersonFilterListForm({availPersonList,availWeekList,onFinishFunc})
{
  return <Col key = 'personAndPersonFilterForm'>
    <Form initialValues={{current_week:availWeekList[0]}} layout='inline' onFinish={onFinishFunc}>
      <Form.Item name = 'current_week' label="周数">
        <Select style={{width:'100px'}} placeholder="周数">
          {availWeekList.map((week)=><Option value = {week}>第{week+1}周</Option>)}
        </Select>
      </Form.Item>
      <Form.Item name = 'selected_names' label = "筛选人员">
        <Select mode = "multiple" allowClear style={{width:"100%",minWidth:"200px"}} placeholder="若查询全部，则无需选择">
          {availPersonList.map((name)=><Option value = {name}>{name}</Option>)}
        </Select>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType='submit'>提交</Button>
      </Form.Item>
    </Form>
  </Col>;
}

function EmptyLesson ({ data, onReturnBack }){
  const [week, setWeek] = useState(0);
  const [filterName, setfilterName] = useState([]);

  const existNameList = data.personList;
  let lessonList = data.table[week];
  let TableData = convertRawDataToTableData(lessonList);

  const pageHeader = <PageHeader className="site-page-header" onBack={() => onReturnBack()} title={"第"+(week+1)+"周空课表"}/>;
  
  const weekAndPersonFilterForm = 
  <WeekAndPersonFilterListForm span = {20} key = 'week_and_person_filter_form'
    availWeekList = {data.table.map((_,i)=>i)}
    availPersonList = {existNameList}
    onFinishFunc = {(tableSelectValues)=>{setWeek(tableSelectValues.current_week);setfilterName(tableSelectValues.selected_names||[]);}}/>;

  const dataSelectRow = <Row justify = 'center' style={{margin: '15px'}} key = 'dataSelectRow'>
        {weekAndPersonFilterForm}
        <Col span = {1}  key ='placeholder col'>
        </Col>
        <Col span = {3}  key ='4'>
          <Space>
            <Button type="primary" onClick={()=>setWeek(week - 1)} disabled={week === 0}>上一周</Button>
            <Button type="primary" onClick={()=>setWeek(week + 1)}disabled={week === data.table.length-1}>下一周</Button>
          </Space>
        </Col>
      </Row>;

  const tableRowElements = ['Monday','Tuesday','Wednesday','Thusday','Friday','Saturday','Sunday'].map(day=>
    <Column title = {day} dataIndex = {day} key = {day} render = {(names) => renderNames(names, filterName)}/>
  );

  return (
    <>
      {pageHeader}
      <Alert message="此课表内不包括所有教务系统中没有显示的课程，以及不对实践课、调课等情况进行处理，还需自行判断" type="error" showIcon />
      {dataSelectRow}
      <Row justify='center' key = 'data table row'>
        <Col span = {24} key ='empty lesson table'>
          <Table dataSource = {TableData} pagination={false}>
            <Column title = '节数' dataIndex = "lesson" key = "lesson"/>
            {tableRowElements}
          </Table>
        </Col>
      </Row>
    </>);
}


export default EmptyLesson;
